<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="avatar">
            <!-- <img class="defalut_avatar" /> -->
          </div>
          <div class="info">
            <div class="name">江小黑</div>
            <div class="member_status member">
              金卡
              <span class="icon-qianjin iconfont"></span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="pay_box">
            <div class="image" />
            <span class="pay">付款</span>
          </div>
        </div>
      </div>
      <div class="bottom" v-if="params && params.isShow && params.isShow.length">
      <div class="bottom_item" v-if="params.isShow.includes('余额')">
        <div class="bottom_item_text">余额</div>
        <div class="bottom_item_number">100</div>
      </div>
      <div class="bottom_item" v-if="params.isShow.includes('卡券')">
        <div class="bottom_item_text">卡券</div>
        <div class="bottom_item_number">2</div>
      </div>
      <div class="bottom_item" v-if="params.isShow.includes('积分')">
        <div class="bottom_item_text">积分</div>
        <div class="bottom_item_number">264</div>
      </div>
    </div>


    </div>
  </div>
</template>

<script>
export default {
  props: {
    module: {
      type: Object
    }
  },
  data() {
    return {
      params: {
        isShow: []
      }
    };
  },
  watch: {
    'module.biz.params': {
      handler(params) {
        this.params = params
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.params = typeof this.module.biz.params === 'string' ? JSON.parse(this.module.biz.params) : this.module.biz.params
  }
};
</script>


<style lang="scss" scoped>
@font-face {
  font-family: "iconfont";
  src: url("data:font/ttf;charset=utf-8;base64,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")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 7px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-qianjin:before {
  content: "\e620";
}

.container {
  margin-top: 10px;
  // width: 100vw;
  .content {
    margin: 0 15px;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px 6px;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        .avatar {
          position: relative;
          height: 52px;
          width: 52px;
          background: #ffb72f;
          border-radius: 50%;
          margin-right: 9px;
          overflow: hidden;
          .employee {
            text-align: center;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            position: absolute;
            bottom: 0;
            z-index: 10;
            font-size: 8px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            padding: 3px 0 4px;
          }
        }
        .info {
          .name {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
          }
          .member_status {
            &.member {
              background: linear-gradient(
                -10deg,
                rgba(255, 244, 228, 0.6),
                rgba(255, 244, 228, 0.77),
                rgba(211, 176, 117, 0.99)
              );
              color: #b19760;
            }
            display: inline-block;
            margin-top: 6px;
            padding: 3px 6px;
            background: #e8e8e8;
            border-radius: 6px;
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
          }
        }
      }

      .right {
        .login {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          background: #ffb72f;
          border-radius: 12px;
          padding: 6px 15px;
        }
        .pay_box {
          background-color: #ffb72f;
          padding: 5px 7px;
          font-size: 12px;
          color: #fff;
          display: flex;
          align-items: center;
          border-radius: 11px;
          .image {
            height: 11px;
            width: 11px;
            margin-right: 4px;
            background: #fff;
          }
        }
      }
    }

    .bottom {
      margin: 20px 13px 11px;
      display: flex;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999;
      .bottom_item {
        width: 102px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .bottom_item_number {
          margin-top: 15px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
      }
    }
  }
}
</style>
